<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>分析Vue和VueComponent</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			分析Vue和VueComponent：
					1.Weather确实是构造函数，但不是程序员亲自定义的构造函数，是Vue.extend生成的。

					2.我们以后只需要去写<Weather/>，Vue底层代码就会帮我们执行new Weather(options)

					3.Vue.extend调用的返回值是VueComponent构造函数，所以new Weather其实就是在new VueComponent

					4.每次调用Vue.extend，都是返回一个全新的VueComponent！！！！。

					5.所谓的组件实例对象，其实都是VueComponent的实例，以后均简称vc
						Vue的实例对象，以后均简称vm

					6.定义组件时，配置中的：data函数、methods中的方法、watch中的函数、computed中的函数 的 this均是vc
						定义vm时，配置中的：data函数、methods中的方法、watch中的函数、computed中的函数 的 this均是vm

					7.VueComponent继承了Vue，所以Vue.prototype上的属性和方法，vc都能看得见。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<Weather></Weather>
			<Hello></Hello>
		</div>

		<script type="text/javascript" >
			Vue.prototype.banji = '1022'
			//定义一个Weather组件
			const Weather = Vue.extend({
				template:`
					<div>
						<h1>今天天气很{{title}}</h1>
						<button @click="changeWeather">点我切换天气</button>
					</div>
				`,
				data(){
					console.log('data',this)
					return {
						isHot:true
					}
				},
				methods:{
					changeWeather(){
						console.log('methods',this)
						this.isHot = !this.isHot
					}
				},
				watch:{
					isHot:{
						immediate:true,
						handler(){
							console.log('watch',this)
						}
					}
				},
				computed:{
					title(){
						console.log('computed',this)
						return this.isHot ? '炎热' : '凉爽'
					}
				}
			})

			//定义一个Student组件
			const Student = Vue.extend({
				template:`<h1>学生姓名：{{stuName}}</h1>`,
				data(){
					return {
						stuName:'小刘'
					}
				}
			})

			//定义一个Hello组件
			const Hello = Vue.extend({
				template:`
					<div>
						<h1>Hello,{{sname}}</h1>
						<Student/>
					</div>
				`,
				data(){
					return {
						sname:'尚硅谷'
					}
				},
				components:{
					Student
				}
			})

			//创建一个vm，用于管理所有的组件
			const vm = new Vue({
				el:'#root',
				components:{ //注册组件
					Weather,
					Hello
				}
			})
			
			console.log(vm)

		</script>
	</body>
</html>